<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理系统</title>
    <link rel="stylesheet" href="../CSS/登录页面渲染.css">
    <script src="../JS/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div class="head">
     <span>图书管理系统</span>
        
    </div>
    <div class="bodyy">
        <div class="container" id="num01">
                <!-- 设定登录的入口 -->
                <div class="tit"><p>登录</p></div>
                    <form>
                <input type="text" v-focus v-model="userName" placeholder="账号/用户名" 
                 @blur="getName" @focus="focus" @input="userNameLimit"><br>
                 <span v-html="msg1"></span>
                <input type="password" v-model="userPassword"
                @blur="getPwd"
                 @keyup.enter.native="handleLogin" placeholder="密码" @input="userPasswordLimit"><br>
                <span v-html="msg2"></span>
                </form> 
                <button @click="login">登录</button>
                <span>没有账号？<a href="./注册页面.html">去注册</a></span> 
            
         </div>
         <!-- 页面的动画效果 -->
         <div class="square">
             <ul>
                 <li></li>
                 <li></li>
                 <li></li>   
                  <li></li>
                  <li></li>
             </ul>
         </div>
         <div class="circle">
            <ul>
                <li></li>
                <li></li>
                <li></li>   
                 <li></li>
                 <li></li>
            </ul>
        </div>
    </div>
    
</body>
<script>
   var pang= new Vue({
        el:"#num01",
        data(){//函数式
            return{ 
               userName: '',
                userPassword: '',
                msg1: '',
                msg2:''
            }
        },
        methods: {
        //限定只能输入数字和字母
             userPasswordLimit() {
                this.userPassword = this.userPassword.replace(/[^\a-\z\A-\Z0-9]/g, '')
            },
            // 限制输入特殊字符
            userNameLimit () {
                this.userName = this.userName.replace(/[ `~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '')
            },

            /**
             * 失去焦点
             * */
            getName () {
                if (this.userName.length <= 0) {
                    pang.msg1 = '<span style="color: red">用户名不能为空</span>'
                } else {
                    axios.post('/user/select', {
                        userName: this.userName,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }   //跨域
                    }).then(function (dat) {
                        if (dat.data == "0") {
                            pang.msg = '<span style="color: green">用户名可用</span>'
                        }
                        else if (dat.data == "1")
                            pang.msg = '<span style="color: red">用户名已存在</span>'
                    })
                }
            },
            getPwd(){
                if(this.userPassword.length<=0){
                    pang.msg2 = '<span style="color: red">密码不能为空</span>'
                }
            },
            /**
             * 获取焦点
             * */
            focus: function () {
                pang.msg1 = null,
                pang.msg2=null
            }, 
            login: function () {
                if (this.userName.length <= 0) {
                    alert("用户名不能为空")
                } else if (this.userPassword.length <= 0) {
                    alert("密码不能为空")
                } else {
                    axios.post('/user/addUser', {
                        userName: this.userName,
                        userPassword: this.userPassword,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }   //跨域
                    }).then(function (dat) {
                        if (dat.data == '1') {
                            window.location.href = '/user/successRegister'
                        } else {
                            alert("登录失败")
                        }

                    })
                }

            }
        },

    })
</script>
</html>